<%--
  Created by IntelliJ IDEA.
  User: a1557
  Date: 2020/10/13
  Time: 20:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>首页</title>
        <%-- 不以/开始的相对路径,找资源以路径为基准,经常容易出事
             以/开始的以服务器路径为准 : http://localhost:8080/
         --%>

        <% pageContext.setAttribute("APP_PATH", request.getContextPath());%>


        <%--引入样式--%>
        <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/jquery-3.4.1.min.js"></script>
        <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

        <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    </head>
    <body>

        <!-- 员工修改的模态框 -->
        <div class="modal fade" id="empUpdateModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">员工修改</h5>
                    </div>

                    <%--表单里面的内容--%>
                    <div class="modal-body  has-success">
                        <form>
                            <div class="form-group row">
                                <%--empName输入框--%>
                                <label class="col-sm-2 col-form-label">empName</label>
                                <div class="col-sm-10">
                                    <p class="form-control-static" id="emp_Name_static">c</p>
                                </div>
                            </div>
                            <%--email--%>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="email" id="input_email_update"
                                           placeholder="EmployeeEmail">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <%--性别--%>
                            <div class="form-group row">
                                <label class="col-sm-2 control-label">gender</label>
                                <div class="col-sm-10">
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="M"
                                               checked="checked"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="F"> 女
                                    </label>
                                </div>
                            </div>

                            <%--显示部门的名字--%>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">deptName</label>
                                <div class="col-sm-5">
                                    <%--部门提交dId--%>
                                    <select class="form-control" name="dId">
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 员工新增的 Modal -->
        <div class="modal fade" id="empAddModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">员工添加</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <%--表单里面的内容--%>
                    <div class="modal-body  has-success">
                        <form>
                            <div class="form-group row">
                                <%--empName输入框--%>
                                <label class="col-sm-2 col-form-label">empName</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="empName" id="input_empName_add"
                                           placeholder="EmployeeName">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <%--email--%>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="email" id="input_email_add"
                                           placeholder="EmployeeEmail">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <%--性别--%>
                            <div class="form-group row">
                                <label class="col-sm-2 control-label">gender</label>
                                <div class="col-sm-10">
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="M"
                                               checked="checked"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="F"> 女
                                    </label>
                                </div>
                            </div>

                            <%--显示部门的名字--%>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">deptName</label>
                                <div class="col-sm-5">
                                    <%--部门提交dId--%>
                                    <select class="form-control" name="dId">
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <%--搭建显示页面--%>
        <div class="container">
            <%--标题--%>
            <div class="row">
                <div class="col-lg-12">
                    <h1>简单的增删改查</h1>
                </div>
            </div>
            <%--按钮--%>
            <div class="row">
                <div class="col-md-4 col-md-offset-8">
                    <button class="btn btn-primary" id="emp_add_btn">新增</button>
                    <button class="btn btn-danger" id="emp_delAll_btn">删除</button>
                </div>
            </div>
            <%--显示表格--%>
            <div class="row">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-hover" id="emps_table">
                            <thead>
                                <tr class="p-3 mb-2 bg-success text-white">
                                    <th>
                                        <input type="checkbox" id="check_all">
                                    </th>
                                    <th scope="col">ID</th>
                                    <th scope="col">员工名</th>
                                    <th scope="col">性别</th>
                                    <th scope="col">邮箱</th>
                                    <th scope="col">部门名</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <%--显示查询员工列表--%>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <%--pegeNum : 当前页数
                    pages : 总共的页数
                    total : 总记录数
                    navigatepageNums : 连续显示的页码
                --%>
                <%--显示分页信息--%>
                <div class="row">
                    <%--分页文件信息--%>
                    <div class="col-md-6" id="page_info">
                    </div>

                    <%--分页条信息--%>
                    <div class="col-md-6" id="page_nav">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var totalRecord, currentPage;
            //1.页面加载完成以后,直接去发送一个ajax请求
            $(function () {
                //去首页
                to_page(1);
            });

            function to_page(pn) {
                $.ajax({
                    url: "${APP_PATH}/emps",
                    data: "pn=" + pn,
                    type: "GET",
                    success: function (result) {
                        //解析并显示员工数据
                        build_emps_table(result);
                        //解析并显示分页信息
                        build_page_info(result);
                        //分页条
                        build_page_nav(result);

                    }
                });
            }

            //员工列表
            function build_emps_table(result) {
                //清空表格
                $("#emps_table tbody").empty();
                var emps = result.extend.pageInfo.list;
                //遍历json中Employee对象,创建添加到容器中去
                $.each(emps, function (index, item) {
                    var checkBoxTd = $("<td><input type='checkbox' class='check_item'></td>");
                    var empIdTd = $("<td></td>").append(item.empId);
                    var empNameTd = $("<td></td>").append(item.empName);
                    var genderTd = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
                    var emailTd = $("<td></td>").append(item.email);
                    var deptNameTd = $("<td></td>").append(item.department.deptName);

                    //构建按钮
                    var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑"));
                    //为编辑按钮添加一个自定义属性,表示员工Id
                    editBtn.attr("edit_id", item.empId);
                    var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));
                    delBtn.attr("del_id", item.empId);

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

                    //append方法执行完成以后还是返回原来的元素
                    $("<tr></tr>").append(checkBoxTd)
                        .append(empIdTd)
                        .append(empNameTd)
                        .append(genderTd)
                        .append(emailTd)
                        .append(deptNameTd)
                        .append(btnTd)
                        .appendTo("#emps_table tbody");

                });
            }

            //解析显示分页信息
            function build_page_info(result) {
                $("#page_info").empty();
                $("#page_info").append("当前 " + result.extend.pageInfo.pageNum + " 页", "总共 " + result.extend.pageInfo.pages + " 页",
                    " 总共 " + result.extend.pageInfo.total + " 条记录")
                totalRecord = result.extend.pageInfo.total;
                currentPage = result.extend.pageInfo.pageNum;

            }

            //解析显示分页条数据
            function build_page_nav(result) {
                //清空元素
                $("#page_nav").empty();

                var ul = $("<ul></ul>").addClass("pagination")

                var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
                var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
                //如果第一页,首页和上一页按不了
                if (result.extend.pageInfo.hasPreviousPage == false) {
                    firstPageLi.addClass("disabled");
                    prePageLi.addClass("disabled");
                } else {
                    //为元素添加点击翻页
                    firstPageLi.click(function () {
                        to_page(1);
                    })
                    prePageLi.click(function () {
                        to_page(result.extend.pageInfo.pageNum - 1);
                    })
                }


                //创建下一页和尾页
                var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
                var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href", "#"));
                //如果最后一页,尾页和下一页按不了
                if (result.extend.pageInfo.hasNextPage == false) {
                    nextPageLi.addClass("disabled")
                    lastPageLi.addClass("disabled")
                } else {
                    lastPageLi.click(function () {
                        to_page(result.extend.pageInfo.pages);
                    })
                    nextPageLi.click(function () {
                        to_page(result.extend.pageInfo.pageNum + 1);
                    })
                }
                //添加首页,上一个按钮
                ul.append(firstPageLi).append(prePageLi);
                //遍历给ul中添加页码
                $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                    //index为索引,item为当前元素
                    var numLi = $("<li></li>").append($("<a></a>").append(item));
                    //如果当前页码,按钮添加样式
                    if (result.extend.pageInfo.pageNum == item) {
                        numLi.addClass("active");
                    }
                    //给每个元素添加点击事件
                    numLi.click(function () {
                        to_page(item);
                    });
                    ul.append(numLi);
                });

                //添加下一页和末页的提示
                ul.append(nextPageLi).append(lastPageLi);
                //将nav添加到上面页面中
                var navEle = $("<nav></nav>").append(ul);
                navEle.appendTo("#page_nav");
            }

            //点击弹出新增按钮
            $('#emp_add_btn').click(function () {
                //点击新增就 清空表单中的全部元素内容
                $("#empAddModel form")[0].reset();
                //清除提示下面的信心
                show_validata_msg("#input_empName_add", "success", "");
                show_validata_msg("#input_email_add", "success", "");

                $("#empAddModel select").empty();
                //发送ajax请求,查出部门信息,并显示在下拉列表中
                getDepts("#empAddModel select");
                //弹出模拟框
                $("#empAddModel").modal({
                    backdrop: "static"
                });
            });

            //查出所有的部门信息并将部门名显示在下拉列表中
            function getDepts(ele) {
                $(ele).empty();
                $.ajax({
                    url: "${APP_PATH}/depts",
                    type: "GET",
                    success: function (result) {
                        //遍历部门信息在下拉列表

                        $.each(result.extend.depts, function () {
                            //
                            var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                            optionEle.appendTo(ele);
                        });
                    }
                });
            }

            function getEmp(id) {
                $.ajax({
                    url: "${APP_PATH}/emp/" + id,
                    type: "GET",
                    success: function (result) {
                        var empData = result.extend.emp;
                        $('#emp_Name_static').text(empData.empName);
                        $('#input_email_update').val(empData.email);
                        $("#empUpdateModel input[name=gender]").val([empData.gender]);
                        $("#empUpdateModel select").val([empData.dId]);
                        ;
                    }
                });
            }

            //模拟框中填写的表单数据进行保存,发送ajax请求保存员工
            $("#emp_save_btn").click(function () {
                //1.先要对提交的服务器的数据进行(前端)校验
                if (!verify_add_from()) {
                    return false;
                }

                //判断自定义属性看看能不能提交
                if ($(this).attr("ajax-va") == "error") {
                    show_validata_msg("#input_empName_add", "error", "用户名不可用");
                    return false;
                }


                //发送ajax请求保存员工
                $.ajax({
                    url: "${APP_PATH}/emps",
                    type: "POST",
                    data: $("#empAddModel form").serialize(),
                    //后端约束和保存
                    success: function (result) {
                        if (result.code == 100) {
                            //员工保存成功
                            //1.关闭模拟狂 2.来到最后一页,显示刚刚保持的数据
                            $('#empAddModel').modal('hide');
                            //发送Ajax请求发送最后一页,发送请求大于总页码,会自动跳转到最后一页,所以直接发送值为总记录数,这样的话,不可能超越总记录数,直接显示最后一页
                            to_page(totalRecord);
                        } else {
                            //显示错误信息
                            //邮箱错误
                            if (undefined != result.extend.errorFields.email) {
                                show_validata_msg("#input_email_add", "error", "邮箱格式不正确");
                            }
                            //名字错误
                            if (undefined != result.extend.errorFields.empName) {
                                show_validata_msg("#input_empName_add", "error", "用户名不可用");
                            }
                        }

                    }
                })

            });

            //校验表单数据的合法性
            function verify_add_from() {
                //1.拿到要检验的数据,使用正则表达式

                var empName = $("#input_empName_add").val();
                var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,7}$)/;
                if (!regName.test(empName)) {
                    //先清空格式,再去把格式不正确就让input框变成红色
                    show_validata_msg("#input_empName_add", "error", "用户名可以是2-7位中文或者6-16位英文数值的组合");
                    return false;
                } else {
                    show_validata_msg("#input_empName_add", "success", "");
                }
                //检验邮箱
                var email = $("#input_email_add").val();
                var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if (!regEmail.test(email)) {
                    show_validata_msg("#input_email_add", "error", "邮箱格式不正确")
                    return false;
                } else {
                    show_validata_msg("#input_email_add", "success", "")
                }
                return true;
            }

            //校验用户名是否可用(判断数据库中是否含有该字段)
            $("#input_empName_add").change(function () {
                //发送ajax请求校验用户名是否可用
                var empName = this.value;
                //如果用户名没有写的话,就不要发送请求,提高效率
                if (empName == "") {
                    show_validata_msg("#input_empName_add", "success", "");
                    return false;
                }
                $.ajax({
                    url: "${APP_PATH}/checkuser",
                    data: "empName=" + empName,
                    type: "POST",
                    success: function (result) {
                        //判断是否可用,且增加自定义属性,不能提交
                        if (result.code == 100) {
                            show_validata_msg("#input_empName_add", "success", "用户名可用");
                            $("#emp_save_btn").attr("ajax-va", "success");
                        } else {
                            show_validata_msg("#input_empName_add", "error", result.extend.va_msg);
                            $("#emp_save_btn").attr("ajax-va", "error");
                        }
                        //result.code == 100 ? show_validata_msg("#input_empName_add", "success", "用户名可用") : show_validata_msg("#input_empName_add", "error", "用户不可用");
                    }
                });

            });

            //提取方法对元素正确性输入框变化和显示错误语句
            function show_validata_msg(ele, status, msg) {
                //清除元素当前的检验状态
                $(ele).parent().removeClass("has-success has-error")
                $(ele).next("span").text("");

                if ("success" == status) {
                    $(ele).parent().addClass("has-success");
                    $(ele).next("span").text(msg);
                } else if ("error" == status) {
                    $(ele).parent().addClass("has-error");
                    $(ele).next("span").text(msg);
                }
            }

            //按钮创建之前绑定click,所以绑不上
            //2.创建按钮的绑定, 绑定点击.live()
            $(document).on("click", ".edit_btn", function () {
                //查出部门信息,显示部门列表,以及查询员工信息
                getDepts("#empUpdateModel select")
                getEmp($(this).attr("edit_id"))
                //员工id传递给更新按钮
                $("#emp_update_btn").attr("edit_id", $(this).attr("edit_id"));
                $("#empUpdateModel").modal({
                    backdrop: "static"
                });
            });


            //点击更新按钮判断并提交数据
            $("#emp_update_btn").click(function () {
                var email = $("#input_email_update").val();
                var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if (!regEmail.test(email)) {
                    show_validata_msg("#input_email_update", "error", "邮箱格式不正确")
                    return false;
                } else {
                    show_validata_msg("#input_email_update", "success", "")
                }
                $.ajax({
                    url: "${APP_PATH}/emp/" + $(this).attr("edit_id"),
                    type: "PUT",
                    data: $("#empUpdateModel form").serialize(),
                    /*type: "POST",
                    data: $("#empUpdateModel form").serialize() + "&_method=PUT",*/
                    success: function () {
                        //关闭对话框
                        $("#empUpdateModel").modal("hide");
                        //回到本页面
                        to_page(currentPage);
                    }
                })
            });

            //给删除按钮添加单击事件
            $(document).on("click", ".delete_btn", function () {
                //1.弹出是否确定删除
                var empName = $(this).parents("tr").find("td:eq(2)").text();
                var empId = $(this).attr("del_id");
                if (confirm("确定删除[" + empName + "]吗?")) {
                    //确认,发送ajax请求删除即可
                    $.ajax({
                        url: "${APP_PATH}/emp/" + empId,
                        type: "DELETE",
                        success: function (result) {
                            alert("处理成功");
                            to_page(currentPage);
                        }

                    });
                }

            });

            //点击全选/全不选择按钮
            $('#check_all').click(function () {
                //使用prop修改和获取值
                $(".check_item").prop("checked", $(this).prop("checked"));
            });

            //
            $(document).on("click", ".check_item", function () {
                //判断选中的元素是否五个
                var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check_all").prop("checked", flag);
            })
            //点击全部删除,就批量删除
            $("#emp_delAll_btn").click(function () {
                var empNames = "";
                var del_idstr = "";
                $.each($('.check_item:checked'), function () {
                    empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                    del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
                });
                //去除empNames多余的,
                empNames = empNames.substring(0, empNames.length - 1);
                //去除多余的-
                del_idstr = del_idstr.substring(0, empNames.length - 1);
                if (confirm("确定删除[" + empNames + "]吗?")) {
                    //发送ajax清除删除
                    $.ajax({
                        url: "${APP_PATH}/emp/" + del_idstr,
                        type: "DELETE",
                        success: function (result) {
                            alert(result.msg)
                            to_page(currentPage);
                        }
                    });
                }
            });

        </script>
    </body>
</html>
